<template>
	<view class="apply-details">
		<img class="bg-img" src="@appstatic/img/my/bg-img.jpg" alt="">
		<div class="content-box">
			<!-- 申请中 -->
			<view class="top-box" v-if="data.applyStatus==0"
				style="background-color: #e1e1e1;background-image: url('@appstatic/my/orderHome/apply-detail-loading-bg.png');">
				<view class="t-header" style='color: #3D3A3A;'>{{data.masterName}}</view>
				<div class="t-result" style='color: #3D3A3A;'>申请中</div>
			</view>
			<!-- 审核通过 -->
			<view class="top-box" v-else-if="data.applyStatus==1">
				<view class="t-header">{{data.masterName}}</view>
				<image class="icon" style="margin-right: 12rpx;" src="@appstatic/my/orderHome/details-icon.png" />
				<div class="t-result">审核通过</div>
			</view>
			<!-- 审核不通过 -->
			<view class="top-box" v-else-if="data.applyStatus==2"
				style="background-color: #3d3a3a;background-image: url('@appstatic/my/orderHome/apply-detail-warn-bg.png');">
				<view class="t-header">{{data.masterName}}</view>
				<image class="icon" style="margin-right: 12rpx;" src="@appstatic/my/orderHome/details-warn-icon.png" />
				<div class="t-result">审核不通过</div>
			</view>
			<view class="detail-box">
				<view class="d-title">申请详情</view>
				<view class="li-box">
					<view class="name">用户昵称</view>
					<view class="text">{{data.wechatName}}</view>
				</view>
				<view class="li-box">
					<view class="name">提交时间</view>
					<view class="text">{{data.applyTime}}</view>
				</view>
				<block v-if="data.applyStatus!=0">
					<view class="li-box">
						<view class="name">审核时间</view>
						<view class="text">{{data.approverTime}}</view>
					</view>
					<view class="li-box">
						<view class="name">审核意见</view>
						<view class="text">{{data.approverRemark}}</view>
					</view>
				</block>

			</view>
		</div>

	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js");
	const dialog = require("../../../utils/dialog.js");
	import titlebara from '@/components/titlebar/titlebar'
	export default {
		components: {
			titlebara
		},
		data() {
			return {
				id: '',
				data: {
					applyStatus: null,
					applyTime: null,
					approverRemark: null,
					approverTime: null,
					id: null,
					masterName: null,
					wechatName: null
				}
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getApplyLogInfoAPP()
		},
		methods: {
			//查询申请记录详情（APP）
			getApplyLogInfoAPP: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_USERMASTER_GETAPPLYLOGINFOAPP;
				var params = {
					id: this.id
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.data = res.data
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
		}


	}
</script>

<style lang='scss' scoped>
	.apply-details {
		width: 100vw;
		box-sizing: border-box;
		padding: 0rpx 32rpx 0;
		background-color: #f5f5f5;

		.bg-img {
			position: fixed;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.content-box {
			padding-top: 40rpx;

			.top-box {
				background-color: #FF6F22;
				width: 100%;
				box-sizing: border-box;
				padding: 48rpx 32rpx;
				display: flex;
				align-items: center;
				font-weight: 700;
				font-size: 32rpx;
				line-height: 46rpx;
				color: #FFFFFF;
				border-radius: 8rpx;
				background-image: url("@appstatic/my/orderHome/apply-detail-bg.png");
				background-repeat: no-repeat;
				background-size: 100%;

				.t-header {
					flex: 1;
				}

				.icon {
					width: 40rpx;
					height: 40rpx;
				}

				.color {
					color: #B63300;
				}
			}

			.detail-box {
				width: 100%;
				box-sizing: border-box;
				padding: 0 28rpx;

				.d-title {
					font-weight: 600;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #3D3A3A;
					margin-top: 48rpx;
				}

				.li-box {
					display: flex;
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 36rpx;

					.name {
						color: #ADB0AE;
						padding-right: 20rpx;
					}

					.text {
						flex: 1;
						text-align: right;
					}
				}
			}
		}

	}
</style>
